<template>
  <view class="service-records">
    <view class="record-item" v-for="(item, index) in records" :key="index">
      <view class="record-header">
        <text class="service-type">{{ item.type }}</text>
        <text class="service-date">{{ item.date }}</text>
      </view>
	  
      <view class="shadow-divider"></view>
	   
      <view class="record-content">
        <view class="content-row">
          <text class="label">订单编号：</text>
          <text class="value">{{ item.orderNo }}</text>
        </view>
        
        <view class="content-row">
          <text class="label">{{ item.type === '拖车' ? '起点：' : '位置：' }}</text>
          <text class="value">{{ item.location }}</text>
        </view>
        
        <view class="content-row" v-if="item.type === '拖车'">
          <text class="label">终点：</text>
          <text class="value">{{ item.destination }}</text>
        </view>
        
        <view class="content-row">
          <text class="label">车牌：</text>
          <text class="value">{{ item.carInfo }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      records: [
        {
          type: '换胎',
          date: '2023-02-15',
          orderNo: '12121211247878',
          location: '洛阳市道北路32号XXX小区',
          carInfo: '奔驰FWE4/豫A98FHJ'
        },
        {
          type: '拖车',
          date: '2023-02-15',
          orderNo: '12121211247878',
          location: '洛阳市道北路32号XXX小区',
          destination: '洛阳市道北路39号XXXXXX小区',
          carInfo: '奔驰FWE4/豫A98FHJ'
        },
        {
          type: '搭电',
          date: '2023-02-15',
          orderNo: '12121211247878',
          location: '洛阳市道北路32号XXX小区',
          carInfo: '奔驰FWE4/豫A98FHJ'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.service-records {
  padding: 20rpx;
  background: #f5f5f5;
  
  .record-item {
   background-color:ghostwhite;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
	
    .shadow-divider {
        height: 10rpx;
		width: 80%;
		transform: translateX(10%);
		background-color: #f5f5f5; 
		margin-bottom: 30rpx;
    }
    .record-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30rpx;
      
      .service-type {
        color: #3377ff;
        font-size: 32rpx;
      }
	  
	  
      
      .service-date {
        color: #999;
        font-size: 28rpx;
      }
    }
    
    .record-content {
      .content-row {
        display: flex;
        margin-bottom: 10rpx;
        font-size: 28rpx;
        
        .label {
          color: #666;
        }
        
        .value {
          color: #333;
        }
      }
    }
  }
}
</style>
